<!-- 顶部-->
<template>
    <div>
        <div class="topNav">
            <div class="left">
                <img src="../assets/topNav/leftlogo.png" alt="">
            </div>
            <div class="right">
                <div class="rightone">
                    <el-dropdown :hide-on-click="false">
                        <span class="el-dropdown-link">
                            中国大陆<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>北京</el-dropdown-item>
                                <el-dropdown-item>上海</el-dropdown-item>
                                <el-dropdown-item>成都</el-dropdown-item>
                                <el-dropdown-item>杭州</el-dropdown-item>
                                <el-dropdown-item>桂林</el-dropdown-item>
                                <el-dropdown-item>长沙</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                <div class="righttwo">
                    <a href=""><span class="span-left">客服中心</span></a>
                    <a href=""><span>关于我们</span></a>
                </div>

                <div class="rightthree">
                    <a href="">
                        <div class="helloword">
                            <span>{{username}}用户，你好</span>
                        </div>
                        <div class="faceimg">
                            <img src="../assets/topNav/u326.png" alt="">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TopNav',

    data() {
        return {
            username:"张三",
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style scoped>
   .topNav{
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    box-shadow:5px 5px 5px #F3FAFA;
    box-sizing: border-box;
    background-color: white;
   }
   .left{
    height: 70px;
   }
   .left img{
    height: 70px;
    width: auto;
   }
   .right{
    width: 500px;
    height: 70px;
    display: flex;
    justify-content: space-around;
   }
   .rightone{
    height: 70px;
    line-height: 70px;
    margin-top: 28px;
    margin-left: 50px;
   }

   .righttwo{
    line-height: 70px;
   }
   .span-left{
    margin-right: 12px;
   }

   .rightthree{
    line-height: 70px;
    width: auto;
   }
   .rightthree a{
    display: flex;
    justify-content: space-between;
   }
   .rightthree span{
    margin-left: 15px;
   }

   .helloword{
    margin-right: 15px ;
   }
   .faceimg{
    width: 30px;
    line-height: 83px;
    /* border-radius: 30px; */
   }
   .faceimg img{
    width: 30px;
    height: 30px;
   }

   a{
    text-decoration: none;
    color: black;
   }
   
   span{
    font-family: "黑体", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #666666;
   }

</style>